<script setup lang="ts">
import { ref } from 'vue'
import EditTemplate from './EditTemplate.vue'
import SytTable from '@/components/SytTable/SytTable.vue'
import { getWorkflowTemplates, deleteWorkflowTemplate } from '@/api/examples'

let tableThs = ref([{ title: '模板名', dataIndex: 'name' }])
let tableData = ref([])

let searchName = ref('')

let dialogVisible = ref(false)

let workflowDataRaw = () => ({
  name: '',
  formData: '',
  flowData: {
    nodesData: [],
    linesData: []
  }
})

let workflowData = ref(workflowDataRaw())

const addTemplate = () => {
  dialogVisible.value = true
  workflowData.value = workflowDataRaw()
}
const openDialogByEdit = (row) => {
  dialogVisible.value = true
  workflowData.value = row
}
const deleteUser = async (row) => {
  await deleteWorkflowTemplate(row)
  initData()
}
const afterSubmit = () => {
  initData()
  dialogVisible.value = false
}

const initData = () => {
  getWorkflowTemplates().then((res) => {
    if (res.data) tableData.value = res.data
  })
}
initData()
</script>

<template>
  <div>
    <div class="flex">
      <el-button type="primary" @click="addTemplate">添加模板</el-button>
      <el-input v-model="searchName" class="search" clearable placeholder="输入模板名查询" />
    </div>

    <el-dialog
      v-model="dialogVisible"
      width="80%"
      fullscreen
      destroy-on-close
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <EditTemplate :data="workflowData" @submit="afterSubmit" />
    </el-dialog>
    <SytTable :columns="tableThs" :data="tableData.filter((v) => v.name.includes(searchName))">
      <template #operations="scope">
        <el-button
          size="small"
          type="primary"
          icon="Edit"
          circle
          @click="openDialogByEdit(scope.row)"
        />
        <el-popconfirm
          :title="`确定删除 ${scope.row.name}`"
          confirm-button-text="确定"
          cancel-button-text="取消"
          icon="InfoFilled"
          icon-color="var(--el-color-warning)"
          @confirm="deleteUser(scope.row)"
        >
          <template #reference>
            <el-button size="small" type="danger" icon="Delete" circle />
          </template>
        </el-popconfirm>
      </template>
    </SytTable>
  </div>
</template>

<style scoped>
.search {
  width: 150px;
  margin-left: 10px;
}
</style>
@/api/examples
